<template>
  <div>
<MyHeader
 color="balck" 
 background="blue"
  title="Tabbar-案例"></MyHeader>
<div class="min">
  
  <component :is="comName"></component>
</div>
  <MyTabBar :arr="tabList"
  @change="changecomFn"> </MyTabBar>
  </div>
</template>

<script>

import MyHeader from './components/MyHeader.vue'//头部
import MyTabBar from './components/MyTabar.vue'//底部
//   要在中间页面显示， 因为我有 三个页面 ，三个页面不能同时显示 ，就用到了动态组件 点击随意切换
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGooDsSearch.vue'
import MyUserInfo from './views/MyUserlnfo.vue'
export default {
components:{
  MyHeader,
 MyTabBar,
MyGoodsList,
 MyGoodsSearch,
 MyUserInfo,
},
data () {
  return {
    comName:'GoodsList',//默认首页
    tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
  }
},
methods:{
  changecomFn(cName){
    //cName传过来的就是 每个组件
this.comName=cName
//mytabbar里选出来的组件名富裕给is属性的comName 就可以导致组件的切换了
  }
}
}
</script>

<style scoped>
.min{
 padding-top:45px;
 padding-bottom:51px;
}
</style>